<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>台帐管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" style="margin-top: 20px;">
      <el-form-item label='店铺列表'>
        <el-select :multiple="false" v-model="stationId" placeholder="请选择店铺" style="width:150px;">
          <el-option v-for="item in stationLst" :key="item.id" :label="item.station_name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label='状态'>
        <el-select v-model="typeValue" @change="selectChange" placeholder="请选择">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始日期-结束日期">
        <el-date-picker v-model="startAndEndvalue" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="getPlatformContentList(1)">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-form :inline="true">
      <el-form-item label="备用金统计">
        <el-button size="small" type="primary">{{ data2||0 }}</el-button>
      </el-form-item>
      <el-form-item label="企微收款统计">
        <el-button size="small" type="primary">{{ data18||0  }}</el-button>
      </el-form-item>
      <el-form-item label="派奖统计">
        <el-button size="small" type="primary">{{ data26||0  }}</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
      element-loading-text="拼命加载中" style="width: 100%; margin-top: 20px;">
      <el-table-column align="center" type="index" width="60">
      </el-table-column>
      <el-table-column prop="stationEntity.station_image" label="店铺照片" width="120">

        <template slot-scope="scope">
          <img style="width: 90px;height: 90px;" :src="scope.row.stationEntity.station_image">
        </template>

      </el-table-column>
      <el-table-column prop="stationEntity.station_name" label="店铺昵称" width="200">
      </el-table-column>
      <el-table-column prop="stationEntity.station_site" label="店铺地址" width="200">
      </el-table-column>
      <el-table-column prop="stationEntity.telephone" label="店铺电话" width="200">
      </el-table-column>
      <el-table-column sortable prop="data0" label="即开入站" width="200">
      </el-table-column>

      <el-table-column sortable prop="data1" label="即开调出" width="200">
      </el-table-column>
      <el-table-column sortable prop="data2" label="备用金" width="200">
      </el-table-column>
      <el-table-column sortable prop="data3" label="传统机销售" width="200">
      </el-table-column>
      <el-table-column sortable prop="data4" label="传统机电票兑奖" width="200">
      </el-table-column>
      <el-table-column sortable prop="data5" label="安卓机销售" width="200">
      </el-table-column>
      <el-table-column sortable prop="data6" label="安卓机手续费" width="200">
      </el-table-column>
      <el-table-column sortable prop="data7" label="竞彩销售" width="200">
      </el-table-column>
      <el-table-column sortable prop="data8" label="电票销售" width="200">
      </el-table-column>
      <el-table-column sortable prop="data9" label="竞猜本月销售" width="200">
      </el-table-column>
      <el-table-column sortable prop="data10" label="电票本月销售" width="200">
      </el-table-column>
      <el-table-column sortable prop="data11" label="建行收款" width="200">
      </el-table-column>
      <el-table-column sortable prop="data12" label="微信收款笔数" width="200">
      </el-table-column>
      <el-table-column sortable prop="data13" label="收款客单" width="200">
      </el-table-column>
      <el-table-column sortable prop="data14" label="销售客单" width="200">
      </el-table-column>
      <el-table-column sortable prop="data15" label="传统机即开兑奖" width="200">
      </el-table-column>
      <el-table-column sortable prop="data16" label="昨日即开库存" width="200">
      </el-table-column>
      <el-table-column sortable prop="data17" label="今日即开库存" width="200">
      </el-table-column>

      <el-table-column sortable prop="data18" label="今日派奖" width="200">
      </el-table-column>
      <el-table-column sortable prop="data19" label="电彩佣金" width="200">
      </el-table-column>
      <el-table-column sortable prop="data20" label="竞彩佣金" width="200">
      </el-table-column>
      <el-table-column sortable prop="data21" label="账户余额" width="200">
      </el-table-column>
      <el-table-column sortable prop="data22" label="今日差额" width="200">
      </el-table-column>
      <el-table-column sortable prop="data23" label="今日即开销量" width="200">
      </el-table-column>
      <el-table-column sortable prop="data24" label="即开本月销量" width="200">
      </el-table-column>
      <el-table-column sortable prop="data25" label="今日总销量" width="200">
      </el-table-column>
      <el-table-column sortable prop="data26" label="企业微信收款" width="200">
      </el-table-column>
      <el-table-column sortable prop="data27" label="现金收款" width="200">
      </el-table-column>
      <el-table-column sortable prop="data28" label="购入即开" width="200">
      </el-table-column>
      <el-table-column sortable prop="data29" label="当日账户余额" width="200">
      </el-table-column>
      <el-table-column sortable prop="data30" label="店员输入金额" width="200">
      </el-table-column>
      <el-table-column sortable prop="data31" label="整月总销量" width="200">
      </el-table-column>
      <el-table-column sortable prop="data32" label="差额" width="200">
      </el-table-column>
      <el-table-column sortable prop="data33" label="充值" width="200">
      </el-table-column>

      <el-table-column sortable prop="remark" label="备注" width="200">
      </el-table-column>
      <el-table-column sortable prop="status" label="状态" width="300">
        <template slot-scope="scope">
          <div v-if="scope.row.status == 0">待审核</div>
          <div v-if="scope.row.status == 1">已驳回</div>
          <div v-if="scope.row.status == 2">已审核</div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="updateTime" label="更新时间" width="300">
        <template slot-scope="scope">
          <div>{{ transformDate(scope.row.updateTime) }}</div>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" @click="statusSuccess(scope.$index, scope.row)">审核通过</el-button>
          <el-button size="mini" @click="statusError(scope.$index, scope.row)">拒绝</el-button>

        </template>
      </el-table-column>
    </el-table>
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

    <!-- 编辑界面 -->
    <el-dialog title="编辑" :visible.sync="editFormVisible" width="80%" @click="closeDialog">
      <el-form label-width="120px" ref="editForm">
        <el-form-item label="即开入站" prop="data0">
          <el-input size="small" v-model="formData.data0" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="即开调出" prop="data1">
          <el-input size="small" v-model="formData.data1" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="备用金" prop="data2">
          <el-input size="small" v-model="formData.data2" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="传统机销售" prop="data3">
          <el-input size="small" v-model="formData.data3" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="传统机电票兑奖" prop="data4">
          <el-input size="small" v-model="formData.data4" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="安卓机销售" prop="data5">
          <el-input size="small" v-model="formData.data5" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="安卓机手续费" prop="data6">
          <el-input size="small" v-model="formData.data6" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="竞彩销售" prop="data7">
          <el-input size="small" v-model="formData.data7" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="电票销售" prop="data8">
          <el-input size="small" v-model="formData.data8" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="竞猜本月销售" prop="data9">
          <el-input size="small" v-model="formData.data9" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="电票本月销售" prop="data10">
          <el-input size="small" v-model="formData.data10" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="建行收款" prop="data11">
          <el-input size="small" v-model="formData.data11" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="微信收款笔数" prop="data12">
          <el-input size="small" v-model="formData.data12" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="收款客单" prop="data13">
          <el-input size="small" v-model="formData.data13" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="销售客单" prop="data14">
          <el-input size="small" v-model="formData.data14" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="传统机即开兑奖" prop="data15">
          <el-input size="small" v-model="formData.data15" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="昨日即开库存" prop="data16">
          <el-input size="small" v-model="formData.data16" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="今日即开库存" prop="data17">
          <el-input size="small" v-model="formData.data17" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="今日派奖" prop="data18">
          <el-input size="small" v-model="formData.data18" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="电彩佣金" prop="data19">
          <el-input size="small" v-model="formData.data19" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="竞彩佣金" prop="data20">
          <el-input size="small" v-model="formData.data20" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="账户余额" prop="data21">
          <el-input size="small" v-model="formData.data21" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="今日差额" prop="data22">
          <el-input size="small" v-model="formData.data22" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="今日即开销量" prop="data23">
          <el-input size="small" v-model="formData.data23" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="即开本月销量" prop="data24">
          <el-input size="small" v-model="formData.data24" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="今日总销量" prop="data25">
          <el-input size="small" v-model="formData.data25" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="企业微信收款" prop="data26">
          <el-input size="small" v-model="formData.data26" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="现金收款" prop="data27">
          <el-input size="small" v-model="formData.data27" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="购入即开" prop="data28">
          <el-input size="small" v-model="formData.data28" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="当日账户余额" prop="data29">
          <el-input size="small" v-model="formData.data29" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="店员输入金额" prop="data30">
          <el-input size="small" v-model="formData.data30" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="本月总销量" prop="data31">
          <el-input size="small" v-model="formData.data31" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="差额" prop="data32">
          <el-input size="small" v-model="formData.data32" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="充值" prop="data33">
          <el-input size="small" v-model="formData.data33" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input size="small" v-model="formData.remark" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="upPlatformContent()"
          v-if="title == '修改'">修改</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  getNewsClassifyList,
  getNewsClassifyTwoList,
  addNews,
  upNews,
  deleteNews,
  getNewsList,
  upPlatformContent,
  getStationList,
  getPlatformContentList,
  getAdminBillList, upAdminBill, upBillStatus
} from "../../api/userMG";
import Pagination from "../../components/Pagination";
import client from "@/utils/ossClient.js";
import VueQuillEditor from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";

// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // toggled buttons
  ["blockquote", "code-block"],

  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }], // superscript/subscript
  [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
  [{ direction: "rtl" }], // text direction

  [{ size: ["small", false, "large", "huge"] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }],
  [{ align: [] }],
  ["link", "image", "video"], // 对于图片上传这是重点
  ["clean"], // remove formatting button
];

export default {
  data() {
    return {
      typeOptions: [
        {
          value: -1,
          label: '全部'
        },
        {
          value: 0,
          label: '待审核'
        },
        {
          value: 1,
          label: '已驳回'
        }, {
          value: 2,
          label: '已审核'
        }],
      startAndEndvalue: '',
      typeValue: -1,
      cursorIndex: 0,
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: (value) => {
                if (value) {
                  // 在这里编写图片按钮点击操作
                  this.uploadVisible = true;
                  this.cursorIndex =
                    this.$refs.QuillEditor.quill.getSelection().index;
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },
      uploadVisible: false,

      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: "添加",

      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 20,
        total: 10,
      },


      classifyList: [],
      classifyId: "",

      classifyTwoList: [],
      classifyTwoId: "",

      formData: {

      },
      stationLst: [{
        id: -1,
        station_name: '全部店铺',
      }],
      stationId: -1,
      data3: '',
      data18: '',
      data26: '',
    };
  },
  // 注册组件
  components: {
    Pagination,
    VueQuillEditor,
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    // this.getdata(this.formInline)

    this.getPlatformContentList(1);
    this.getStationLst()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getPlatformContentList(this.formInline.page)
    },
    //自定义上传方法..
    mainImgUpload1(file) {

      //判断扩展名
      const tmpcnt = file.file.name.lastIndexOf(".");
      const exname = file.file.name.substring(tmpcnt + 1);
      const names = ["jpg", "jpeg", "webp", "png", "bmp"];
      if (names.indexOf(exname) < 0) {
        this.$message.error("不支持的格式!");
        return;
      }
      const fileName = file.file.uid + "." + exname;

      client
        .put(fileName, file.file)
        .then((res) => {
          console.log("res", res)
          if (res.url) {

            this.formData.mainImg = res.url;
          } else {
            this.$message.error("文件上传失败");
          }
        })
        .catch((err) => { });
    },
    //自定义上传方法..
    mainImgUpload(file) {
      var self = this;
      //判断扩展名
      const tmpcnt = file.file.name.lastIndexOf(".");
      const exname = file.file.name.substring(tmpcnt + 1);
      const names = ["jpg", "jpeg", "webp", "png", "bmp"];
      if (names.indexOf(exname) < 0) {
        this.$message.error("不支持的格式!");
        return;
      }
      const fileName = file.file.uid + "." + exname;
      client
        .put(fileName, file.file)
        .then((res) => {
          if (res.url) {
            console.log("2222222", res);
            self.getUrl(res.url);
          } else {
            this.$message.error("文件上传失败");
          }
        })
        .catch((err) => { });
    },
    selectChange(e) {
      console.log('e=====', e)
      this.getPlatformContentList(1)
    },
    getUrl(url) {
      this.uploadVisible = false;
      // 获取富文本组件实例
      let quill = this.$refs.QuillEditor.quill;
      // 如果上传成功
      if (url) {
        // 插入图片，res为服务器返回的图片链接地址

        quill.insertEmbed(this.cursorIndex, "image", url);
        // 调整光标到最后
        quill.setSelection(this.cursorIndex + 1);
      } else {
        // 提示上传失败信息
      }
    },
    //修改
    upPlatformContent() {
      this.loading = true;
      var formData = this.formData;
      upAdminBill(formData).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.editFormVisible = false
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.getPlatformContentList(1)
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getStationLst() {
      this.stationLst = []
      getStationList({ type: 0 }).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.stationLst.push({
            id: -1,
            station_name: '全部店铺',
          })
          this.stationLst.push(...res.data.list);
          return;
        }
        this.$message({
          type: "info",
          message: res.msg,
        });
      });
    },
    getPlatformContentList(page) {
      this.loading = true;
      console.log(' this.param====>', this.param)
      console.log(' this.startAndEndvalue====>', this.startAndEndvalue)
      let beginTime = -1
      let endTime = -1
      if (this.startAndEndvalue.length > 0) {
        beginTime = this.startAndEndvalue[0].getTime() / 1000
        endTime = this.startAndEndvalue[1].getTime() / 1000
      }
      getAdminBillList({
        page: (page - 1) * 20,
        status: this.typeValue,
        beginTime,
        endTime,
        stationId: this.stationId || -1,
      }).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.listData = res.data.list;
          this.data2 = res.data.data2
          this.data18 = res.data.data18
          this.data26 = res.data.data26
          console.log('res.code', this.listData)
          return;
        }
        this.$message({
          type: "info",
          message: res.msg,
        });
      });
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.editFormVisible = true;
      this.title = "修改";
      this.formData = row;
      console.log('formData', this.formData)
    },
    statusSuccess(index, row) {
      this.$confirm("确定要审核通过吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          upBillStatus({
            id: row.id,
            status: 2
          })
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "审核通过",
                });
                this.getPlatformContentList(1);
              } else {
                this.$message({
                  type: "info",
                  message: res.msg,
                });
              }
            })
            .catch((err) => {
              this.loading = false;
              this.$message.error("删除失败，请稍后再试！");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    statusError(index, row) {
      this.$confirm("确定要审核拒绝吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          upBillStatus({
            id: row.id,
            status: 1
          })
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "审核通过",
                });
                this.getPlatformContentList(1);
              } else {
                this.$message({
                  type: "info",
                  message: res.msg,
                });
              }
            })
            .catch((err) => {
              this.loading = false;
              this.$message.error("删除失败，请稍后再试！");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },
  }
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}

.userRole {
  width: 100%;
}

.upload-demo {
  display: flex;
  flex-direction: row;
}

.upload-demo img {
  width: 140px;
  height: 140px;
}
</style>


./Ledger.vue